<template>
  <el-form ref="form"
           :inline="true"
           :model="form"
           label-width="80px"
           :rules="rules">
    <el-form-item class="reset-item"
                  label="用章内容"
                  prop="content"
                  style="width: 100%;">
      <el-input v-model="form.content"
                maxlength="50"
                style="width: 100%;"
                placeholder="请输入用章内容" />
    </el-form-item>
    <br>
    <el-form-item label="申请类型 "
                  prop="type">
      <el-select v-model="form.type"
                 placeholder="选择申请类型"
                 style="width: 200px;">
        <el-option v-for="item in typeItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="用章类型"
                  prop="chapterType">
      <el-select v-model="form.chapterType"
                 multiple
                 placeholder="选择用章类型"
                 style="width: 200px;">
        <el-option v-for="item in chapterTypeItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item label="审核人"
                  prop="checkId">
      <el-select v-model="form.checkId"
                 placeholder="选择审核人"
                 style="width: 200px;">
        <el-option v-for="item in adminItem"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </el-form-item>
    <br>
    <el-form-item class="reset-item"
                  label="备注"
                  style="width: 100%;"
                  prop="remark">
      <el-input v-model="form.remark"
                type="textarea"
                :autosize="{ minRows: 4}"
                style="width: 100%;"
                placeholder="备注信息" />
    </el-form-item>
    <br>
    <el-divider content-position="left">附件</el-divider>
    <el-upload ref="upload"
               action=""
               list-type="picture-card"
               multiple
               :auto-upload="false">
      <i slot="default"
         class="el-icon-plus" />
      <div slot="file"
           slot-scope="{file}">
        <div class="el-upload-list__item-thumbnail"
             style="background-repeat:no-repeat;background-position:center top;background-size:80% auto;position:relative;">
          <img class="el-upload-list__item-thumbnail"
               :src="image"
               :alt="file.name">
          <span style="position:absolute;top:50%;left:0;display:block;width:100%;text-align:center;color:#ffffff;height:30px;line-height:30px;font-weight:bold;margin-top:-15px;letter-spacing:2px;">
            {{ selectExtImage(file) }}</span>
        </div>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-delete"
                @click="handleRemove(file)">
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>
    </el-upload>
    <br>
    <el-row type="flex"
            justify="center"
            align="middle">
      <el-form-item>
        <el-button :loading="loading"
                   type="primary"
                   @click="handleFormSubmit">
          申请用章
        </el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import image from '@/assets/images/file.png'
import uploadMixin from '@/utils/alioss'

export default {
  mixins: [uploadMixin],
  props: {
    loading: {
      default: false,
      type: Boolean
    },
    typeItem: {
      default: () => [],
      type: Array
    },
    chapterTypeItem: {
      default: () => [],
      type: Array
    },
    adminItem: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      rules: {
        content: [{ required: true, message: '请输入用章内容', trigger: 'blur' }],
        type: [{ required: true, message: '请选择申请类型', trigger: 'blur' }],
        chapterType: [{ required: true, message: '请选择用章类型', trigger: 'blur' }],
        checkId: [{ required: true, message: '请选择审核人', trigger: 'blur' }]
      },
      form: {
        content: null,
        type: null,
        chapterType: [],
        checkId: null,
        remark: null,
        attach: []
      },
      image: image
    }
  },
  methods: {
    handleFormSubmit() {
      this.$refs.form.validate((valid) => {
        console.log(this.form);
        // if (valid) {
        //   this.$emit('submit', this.form)
        // }
      })
    },
    async upload(file) {
      const url = await this.contractUpload(file)
      // if (url) {
      //   const attach = await addContractAttach({
      //     contractId: file.data.id,
      //     name: file.file.name,
      //     url: url
      //   })
      //   this.uploadData['k' + file.file.uid] = { id: attach.id, contractId: attach.contractId, url: url }
      //   this.$emit('submit')
      // } else {
      //   this.$refs.upload.$data.uploadFiles.splice(-1, 1)
      // }
    },
    handleFormReset() {
      this.$refs.form.resetFields()
    },
    handleRemove(file) {
      const index = this.$refs.upload.$data.uploadFiles.findIndex(data => data.uid == file.uid)
      this.$refs.upload.$data.uploadFiles.splice(index, 1)
    },
    selectExtImage(file) {
      const tmpcnt = file.name.lastIndexOf('.')
      return file.name.substring(tmpcnt + 1)
    }
  }
}
</script>

<style lang="scss">
.reset-item .el-form-item__content {
  width: calc(100% - 100px);
}
</style>
